<template>
	<div class="find">
		<div class="template" v-show="Loading">
			<div><mt-spinner :type="3" :size="60"></mt-spinner></div>
		</div>
		<header class="navigation">
			<div @click="retreat"><img src="../assets/rightbut.png"></div>
			<div>找回订单</div>
			<div></div>
		</header>
		
		<div class="content">
			
			<div class="seek">
				
				<h4>输入订单编号找回订单</h4>
				<div class="wire"></div>
				<div class="hint">提示：下单1小时后，找回订单更容易哦～</div>
				
				<div class="seekIndent">
					<i class="seekimg"></i>
					<input type="search" class="seekinput" placeholder="点击输入订单编号" ref="seekinput" maxlength="50"/>
				</div>
				
				<div class="promptlyFind" @click="promptlyFind">立即找回</div>
				
				<div class="indentType">—— 去淘宝/京东/拼多多复制订单编号   ——</div>
				
				<div class="flex main_zdy goindent mainAlign_center">
				</div>
				
			</div>
			
			<div class="recently">
				
				<div class="recentlyFind">最近找回</div>
				<div class="wire"></div>
				
				<div class="indentDetails flex side_sdx">
					<div class="indentDetails_t flex main_zdy" >
						<div>订单ID</div>
						<div>预估状态</div>
						<div>累计状态</div>
					</div>
					
					<ul v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
						<div class="indentDetails_b flex main_zdy" v-for="item in indentlist">
							<div class="indent">{{item.orderNum}}</div>
							<div class="defeated" v-if='item.status == "fail"' @click="defeatedon(item.orderDesc)">找回失败></div>
							<div class="dispose" v-if='item.status == "success"'>找回成功></div>
							<div class="dispose" v-if='item.status == "finding"'>处理中</div>
							<div class="defeated" v-if='item.overStatus == "fail"' @click="defeatedon(item.overOrderDesc)">找回失败></div>
							<div class="dispose" v-if='item.overStatus == "success"'>找回成功></div>
							<div class="dispose" v-if='item.overStatus == "finding"'>处理中</div>
						</div>
					</ul>
	
				</div>
				
			</div>
			
			<div class="disposeDetails" v-show="solveshow">
				
				<div class="disposeDetails_d">
					<div class="disposeDetails_title">找回失败</div>
					<div class="cause" v-if='dispose == ""'>失败原因：订单号错误或未经友惠家APP下单，如有疑问请联系客服！</div>
					<div class="cause" v-if='dispose != ""'>{{dispose}}</div>
					<div class="flex main_zdy solve sideAlign_center mainAlign_around">
						<div @click="service">联系客服</div>
						<div @click="cancel">取消</div>
					</div>
				</div>
				
			</div>
			
		</div>
		
		
	</div>
</template>

<script>
	import { BaseUrl } from '../Baseurl/common.js';
	import { Toast } from 'mint-ui';
	import { MessageBox } from 'mint-ui'
	export default{
		data(){
			return{
				token:'',
				indentlist:[],
				index:0,
				loading:'',
				Loading:true,
				solveshow:false,
				dispose:''
			}
		},
		created(){
			this.token = localStorage.getItem('token');
		},
		methods:{
			//导航退后
			retreat:function(){
				window.history.go(-1);
			},
			//订单找回添加
			promptlyFind:function(){
				var seekinput = this.$refs.seekinput.value;
				if(seekinput != 0){
					var url = BaseUrl + 'orders/findback/add?appId=wap' + '&token=' + this.token + '&orderNum=' + seekinput;
					this.$http.get(url).then(res=>{
						if(res.data.code == '10000'){
							this.index = 0;
							this.indentlist = [];
							this.onindentlist(this.index);
						}else{
							Toast({
								message: res.data.msg,
								position: 'middle',
								duration: 3000
							})
						}
					}).catch(error=>{
						Toast({
							message: "网络异常",
							position: 'middle',
							duration: 3000
						})
					})
				}
			},
			//订单列表
			onindentlist(index){
				this.Loading = true;
				var url = BaseUrl +'orders/findback/list?appId=wap' + '&token=' + this.token + '&start=' +this.index + '&length=5';
				this.$http.get(url).then(res=>{
					if(res.data.code == '10000'){
						this.Loading = false;
						this.indentlist = this.indentlist.concat(res.data.data.list);
						if(res.data.data.isMore == "none") {
							this.loading = true;
							return;
						} else if(res.data.data.isMore == "have") {
							this.loading = false;
							this.index++;
						}
						
					}else{
						this.Loading = false;
						Toast({
							message: res.data.msg,
							position: 'middle',
							duration: 3000
						})
					}
				}).catch(error=>{
					this.Loading = false;
					Toast({
						message: "网络异常",
						position: 'middle',
						duration: 3000
					})
				})
			},
			loadMore(){
				this.loading = this.loading;
				if(this.loading == false){
					setTimeout(() => {
						this.onindentlist(this.index);
						this.loading = this.loading;
					}, 100);
				}
			},
			//联系客服
			service:function(){
				window.location.href = 'http://chat56.live800.com/live800/chatClient/chatbox.jsp?companyID=944015&configID=155782&jid=9694995927'
			},
			//点击取消
			cancel:function(){
				this.solveshow = false;
			},
			//点击失败原因
			defeatedon:function(val){
				this.solveshow = true;
				this.dispose = val;
			}
		}
	}
</script>

<style scoped="scoped">
	.template{
		width: 100%;
		height: 100%;
		position: absolute;
		z-index: 99;
	}
	.template div{
		position: absolute;
		top: 5.5rem;
		left: 50%;
		margin-left: -0.6rem;
	}
	.find{
		height: 100%;
		width: 100%;
		overflow-y: auto;
		background: #F2F5F8;
	}
	
	.navigation{
		height: 1rem;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 0.24rem;
		color: #323232;
		font-size: 0.36rem;
	}
	
	.navigation img{
		width: 0.2rem;
		height: 0.36rem;
		display: block;
	}
	
	.content{
		padding: 0.2rem 0.2rem;
	}
	
	.seek{
		width: 100%;
		background: #FFFFFF;
		box-shadow: 0 -0.06rem 0.16rem 0 rgba(2,2,2,0.06);
		border-radius: 0.2rem;
		padding-top: 0.55rem;
		padding-bottom: 0.72rem;
	}
	
	h4{
		font-family: 'PingFangSC-Medium';
		font-size: 0.42rem;
		color: #606266;
		letter-spacing: 0.2px;
		text-align: center;
		margin-bottom: 0.1rem;
	}
	
	.wire{
		width: 0.73rem;
		background-image: linear-gradient(-269deg, #FF5C34 3%, #FF8263 97%);
		border-radius: 50%;
		height: 0.05rem;
		margin: 0 auto;
	}
	
	.hint{
		font-family: 'PingFangSC-Regular';
		font-size: 0.24rem;
		color: #606266;
		letter-spacing: 0.11px;
		text-align: center;
		margin-bottom: 0.4rem;
		margin-top: 0.55rem;
	}
	
	.seekIndent{
		padding: 0 0.3rem;
		position: relative;
	}
	
	.seekimg{
		width: 0.255rem;
		height: 0.26rem;
		display: inline-block;
		background: url(../assets/seek.png);
		background-size: 0.255rem 0.26rem;
		position: absolute;
		top: 0.3rem;
		left: 0.5rem;
	}
	
	.seekinput{
		width: 100%;
		height: 0.8rem;
		background: #F4F7FA;
		border-radius: 1rem;
		margin-bottom: 0.6rem;
		font-family: 'PingFangSC-Medium';
		font-size: 0.28rem;
		color: #303133;
		letter-spacing: 0;
		outline: none;
		text-indent: 0.6rem;
	}
	
	.promptlyFind{
		width: 5.3rem;
		height: 0.76rem;
		background-image: linear-gradient(-90deg, #FF5C34 3%, #FF8263 97%);
		border-radius: 100px;
		text-align: center;
		line-height: 0.76rem;
		color: #FFFFFF;
		font-size: 0.28rem;
		margin: 0 auto;
		margin-bottom: 0.62rem;
	}
	
	.indentType{
		font-family: 'PingFangSC-Medium';
		font-size: 0.24rem;
		color: #8F9399;
		letter-spacing: 0.11px;
		text-align: center;
		margin-bottom: 0.4rem;
	}
	
	.goindent div{
		width: 1.5rem;
		height: 0.5rem;
		text-align: center;
		line-height: 0.5rem;
		font-family: 'PingFangSC-Regular';
		font-size: 0.24rem;
		color: #FF6742;
		letter-spacing: 0;
		background: #FFFFFF;
		border: 1px solid #FF6742;
		border-radius: 1rem;
		margin: 0 0.3rem;
	}
	
	.recently{
		margin-top: 0.2rem;
		width: 100%;
		background: #FFFFFF;
		box-shadow: 0 -0.06rem 0.16rem 0 rgba(2,2,2,0.06);
		border-radius: 0.2rem;
		padding: 0.55rem 0.3rem;
		box-sizing: border-box;
	}
	
	.recentlyFind{
		text-align: center;
		font-family: 'PingFangSC-Medium';
		font-size: 0.42rem;
		color: #606266;
		letter-spacing: 0.2px;
		margin-bottom: 0.1rem;
	}
	
	.indentDetails{
		margin-top: 0.32rem;
	}
	
	.indentDetails_t{
		font-family: 'PingFangSC-Medium';
		font-size: 0.32rem;
		color: #FF6742;
		letter-spacing: 0.15px;
		height: 0.6rem;
		line-height: 0.6rem;
	}
	
	.indentDetails_t div:nth-child(1){
		width: 50%;
	}
	.indentDetails_t div:nth-child(2){
		width: 25%;
		text-align: center;
	}
	.indentDetails_t div:nth-child(3){
		width: 25%;
		text-align: center;
	}
	
	.indentDetails_b{
		font-family: 'PingFangSC-Medium';
		font-size: 0.26rem;
		color: #8F9399;
		letter-spacing: 0.15px;
		height: 0.6rem;
		line-height: 0.6rem;
		border-bottom: 1px dashed #8F9399;
	}
	
	.indent{
		width: 50%;
		padding-right: 0.2rem;
		white-space:nowrap; 
	    text-overflow:ellipsis; 
	    overflow: hidden; 
	}
	.defeated{
		width: 25%;
		text-align: center;
	}
	.dispose{
		width: 25%;
		text-align: center;
		font-family: "PingFangSC-Medium";
		font-size: 0.26rem;
		color: #FF6742;
		letter-spacing: 0.12px;
	}
	
	.disposeDetails{
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.6);
		position: fixed;
		top: 0;
		left: 0;
		padding: 0.32rem;
		box-sizing: border-box;
	}
	.disposeDetails_d{
		width: 80%;
		background: #FFFFFF;
		border-radius: 0.22rem;
		overflow: hidden;
		margin: 50% auto;
	}
	.disposeDetails_title{
		font-family: 'PingFangSC-Medium';
		font-size: 0.36rem;
		color: #303133;
		text-align: center;
		font-weight: bold;
		margin: 0.56rem  0 0.4rem 0;
	}
	.cause{
		margin: 0 0.35rem;
		font-family: 'PingFangSC-Regular';
		font-size: 0.28rem;
		text-align: center;
		color: #8F9399;
		margin-bottom: 0.67rem;
	}
	.solve{
		height: 1rem;
		border-radius: 0 0 0.22rem 0.22rem;
	}
	.solve div:nth-child(1){
		width: 50%;
		height: 100%;
		border-radius: 0 0 0 0.22rem;
		background: #F4F7FA;
		font-family: 'PingFangSC-Regular';
		font-size: 0.32rem;
		color: #303133;
		letter-spacing: 0;
		text-align: center;
		line-height: 1rem;
	}
	.solve div:nth-child(2){
		width: 50%;
		height: 100%;
		border-radius: 0 0 0.22rem 0;
		background: #FF2040;
		font-family: 'PingFangSC-Regular';
		font-size: 0.32rem;
		color: #FFFFFF;
		letter-spacing: 0;
		text-align: center;
		line-height: 1rem;
	}
</style>